import React, { useState, useEffect, useMemo } from "react";
import store from "../redux/store";
import getCinemaListAction from "../redux/actionCreator/getCinemaListAction";
// export default class cinemas extends Component {
//   render() {
//     return <div>cinemas</div>;
//   }
// }
export default function Cinemas(props) {
  const [cityName] = useState(store.getState().CityReducer.cityName);
  const [mytext, setmytext] = useState("");
  const [cinemaList, setCinemaList] = useState(
    store.getState().CinemasListReducer.list
  );
  useEffect(() => {
    // console.log(store.getState().CinemasListReducer.list);
    // 要进行使用缓存 如果list为空去后台取数据如果不为空 就使用缓存
    if (store.getState().CinemasListReducer.list.length === 0) {
      //用了redux尽量不在hooks其中进行数据交互 尽量在redux里进行管理
      //actionCreator里面写异步
      // debugger;
      //写了中间件就可以 store.dispatch函数
      store.dispatch(getCinemaListAction());
    } else {
      console.log("使用store缓存");
    }
    //订阅
    let unsubscribe = store.subscribe(() => {
      console.log("订阅时间", store.getState().CinemasListReducer.list);
      setCinemaList(store.getState().CinemasListReducer.list);
      //重复切换城市和电影会导致重复订阅
    });
    return () => {
      //取消订阅？
      unsubscribe();
    };
  }, []);
  const getCinemaList = useMemo(
    () =>
      cinemaList.filter(
        (item) =>
          item.name.toUpperCase().includes(mytext.toUpperCase()) ||
          item.address.toUpperCase().includes(mytext.toUpperCase())
      ),
    [cinemaList, mytext]
  );
  return (
    <div>
      <input
        style={{ marginLeft: "10px", marginTop: "10px" }}
        value={mytext}
        onChange={(e) => {
          setmytext(e.target.value);
        }}
      />

      {getCinemaList.map((item) => (
        <dl key={item.cinemaId} style={{ padding: "10px" }}>
          <dt style={{ fontSize: "18px", color: "black", fontWeight: "700" }}>
            {item.name}
          </dt>
          <dd style={{ fontSize: "12px", color: "gray" }}>{item.address}</dd>
        </dl>
      ))}
    </div>
  );
}
